<template>
	<view class="">
		<view class="bj"></view>
		<!-- 标签切换 -->
		<view class="tabs">
			<u-tabs :list="tblist" bar-width="111" :is-scroll="false" :current="current" @change="change"
				inactive-color="#333333" active-color="#ff7200">
			</u-tabs>
		</view>
			<u-empty text="暂无订单" mode="list" v-if="list.length==0" margin-top="100"></u-empty>
		<view class="box"  v-for="(item,index) in list" :key="index">
			<view class="ordrnum">
				<view class="dingd">
					订单号：{{item.order_num}}
				</view>
				<view class="ds dfh" v-if="item.state==1">
					待发货
				</view>
				<view class="ds dsh" v-if="item.state==2">
					待收货
				</view>
				<view class="ds ywc" v-if="item.state==3">
					已完成
				</view>
			</view>

			<view class="boxss" @click="orderxq(item.id)">
				<image :src="item.commodity.img" mode=""></image>
				<view class="rightboxs">
					<view class="xq">
						<view class="nr">
							<view class="name">
								{{item.commodity.name}}
							</view>
							<view class="jf">
								积分：{{item.commodity.integral}}
							</view>
						</view>
						<view class="shuliang">
							X{{item.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="hr"></view>
			<view class="btnbox">
				<view class="yzf">
					已支付：<text class="jf">{{item.integral}} 积分</text>
				</view>
				<view class="qr" @click="affirm(item.id)" v-if="item.state==2">
					确认收货
				</view>
			</view>
			<view class="hrs"></view>
		</view>
	</view>
</template>

<script>
	import Modkeprodct from "../../components/Modkeprodct/index.vue"
	import {
		getintegrallist,
		confirmreceiving
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				tblist: [{
					name: "全部"
				}, {
					name: "待发货"
				}, {
					name: "待收货"
				}, {
					name: "已完成"
				}],
				current: 0,
				flag: false,
				list: [],
				arrlist: [],
				page: 0,
				limit: 3,

			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.page = 0
				this.flag = false
				this.list = []
				this.public()
			},
			// 订单详情
			orderxq(v) {
				this.jumpLink({
					link: "/pagesB/orderxq/index",query:{id:v}
				})
			},
			public() {
				if (this.flag) {
					return uni.showToast({
						title:"没有更多了",
						icon:"none",
						duration:1000
					})
				}
				this.page++
				let data = {
					page: this.page,
					limit: this.limit,
					type: this.current
				}
				uni.showLoading({
					title:"加载中"
				})
				getintegrallist(data).then(res => {
					uni.hideLoading()
					this.list = this.list.concat(res.data)
					if (res.data.length < this.limit) {
						this.flag = true
					}
				})
			},
			// 确认收货
			affirm(v){
				uni.showLoading({
					title:"载入中"
				})
				confirmreceiving({id:v}).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:"success",
						duration:2000
					})
					this.page=0
					this.flag=false
					this.list=[]
					this.public()
				})
			}
		},
		onShow() {
			this.page=0
			this.flag=false
			this.list=[]
			this.public()
		},
		components: {
			Modkeprodct
		},
		onReachBottom() {
			this.public()
		}
	}
</script>

<style scoped lang="scss">
	.bj {
		background-color: #F42121;
		height: 124rpx;
		width: 100%;
	}

	.tabs {
		position: absolute;
		left: 25rpx;
		top: 52rpx;
		width: 700rpx;
		border-radius: 100rpx;
	}

	.box {
		width: 700rpx;
		background-color: #FFFFFF;
		margin-left: 25rpx;

		.ordrnum {
			display: flex;
			justify-content: space-between;
			margin-left: 20rpx;
			padding-top: 42rpx;
			padding-bottom: 20rpx;
			font-size: 22rpx;
			box-sizing: border-box;

			.dingd {
				color: #666666;
			}

			.dsh {
				color: #4662b2;
			}

			.dfh {
				color: #FF3333;
			}

			.ywc {
				color: #666666;
			}

			.ds {
				margin-right: 31rpx;
			}
		}

		.hr {
			width: 678rpx;
			margin-left: 10rpx;
			height: 1rpx;
			background-color: #000000;
			opacity: 0.2;
			margin-top: 60rpx;
		}

		.btnbox {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;
			align-items: center;

			.yzf {
				font-size: 24rpx;
				font-weight: normal;
				color: #333333;

				.jf {
					color: #ff0000;
				}
			}

			.qr {
				width: 186rpx;
				height: 58rpx;
				background-color: #ff3333;
				border-radius: 29rpx;
				color: #ffffff;
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				line-height: 58rpx;
				text-align: center;
			}
		}

		.hrs {
			width: 100%;
			height: 21rpx;
			background-color: #DDDDDD;
		}


		.boxss {
			padding: 10rpx;
			box-sizing: border-box;
			display: flex;

			image {
				width: 170rpx;
				height: 170rpx;
			}

			.rightboxs {
				margin-left: 30rpx;
				width: 500rpx;

				.xq {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.nr {
						.name {
							color: #282828;
							font-family: MicrosoftYaHei;
							font-size: 26rpx;
							margin-top: 17rpx;
							width: 400rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.rl {
							font-family: MicrosoftYaHei;
							font-size: 20rpx;
							color: #666666;
							margin-top: 25rpx;
						}

						.jf {
							font-family: MicrosoftYaHei;
							font-size: 20rpx;
							color: #666666;
							margin-top: 84rpx;
						}
					}

					.shuliang {
						font-family: MicrosoftYaHei;
						font-size: 28rpx;
						color: #282828;
					}
				}
			}
		}
	}
</style>
